<template>
          <div class="task-items">
            <el-table :data="tabelData" size="small"  stripe style="width: 100%;" v-loading="listLoading">
              <el-table-column type="index" label="序号" width="55"></el-table-column>
              <el-table-column label="任务名称" min-width="280" align="left">
                  <template slot-scope="{row}">
                      <div class="task-name" @click="linkToHandler(row)"> 
                          <span v-if="!isHand">{{ row.variables.bussName }}</span>
                          <span v-else>{{ row.bussName }}</span>
                      </div>
                    </template>
              </el-table-column>
              <el-table-column label="截止日期" min-width="180">
                <template slot-scope="{row}">
                  <span v-if="!isHand">{{ parseTime(row.createTime) }}</span>
                  <span v-else>{{ parseTime(row.createtime) }}</span>
                </template>
              </el-table-column>
            </el-table>
            <pagination 
              class="pageWrapper" 
              v-show="total>0" 
              :total="total" 
              :layout="'total, prev, pager, next'" 
              :page.sync="page" 
              :limit.sync="pageSize" 
              @pagination="handlePage" 
            />   
        </div>
      </template>
      <script>
        import { mapGetters } from 'vuex'
        import { getPendingTaskInfo } from '@/api/work.js'
        import { parseTime } from '@/utils'
        export default {
          name: 'ApproveTable',
          components: {
            'Pagination': require('@/components/Pagination').default,
          },
          props:{
              tabelData:{
                  type: Array,
                  defalut: []
              },
              isHand:{
                  type: Boolean,
                  defalut: false
              },
              total:{
                  type: Number,
                  defalut: 0
              }
          },
          data() {
            return {
              listLoading: false,
              pageSize: 10,
              page: 1
            }
          },
          computed:{
            ...mapGetters([
              'id'
            ])
          },
          methods: {
            parseTime,
            // 分页
            handlePage(val) {
              this.$emit('handPage', this.isHand, val.page)
            },
             // 跳转到处理公文页面
            // item.variables.bussinesskey, item.procInstId, item.procDefId, item.id
            linkToHandler(item) {
              let procInstId = null,
                  procDefId = null,
                  id = null
              const { taskDefKey, variables } = item
              const { bussinesskey, businessKey, startUserId, approvalType } = variables

              if(this.isHand){
                procInstId = item.proInsId
                procDefId = item.proDefId
              }else{
                id = item.id
                procInstId = item.procInstId
                procDefId = item.procDefId
              }
              this.$router.push({
                name: approvalType ? 'ApprovalPager' : 'HandlerPager',
                params: {
                  type: 'handler',
                  id: id,
                  nodeName: item.name,
                  proDefId: procDefId,
                  proInsId: procInstId,
                  targetId: bussinesskey || businessKey,
                  rejectKey: taskDefKey || '',
                  startUserId: startUserId || '',
                  variables: item.variables,
                  isHand: this.isHand,
                  approvalType
                }
              })
            },
          },
        }
      
      </script>
      <style lang="scss">
          .task-items {
            .task-name{
              cursor: pointer;
            }
          
        }
      
      </style>
      <style>
      
      </style>
      